Use require.resolve logic in builds & watch .js files from node_modules

apps/fabric-website/config/pre-copy.json

@@ -1,7 +1,7 @@
 {
   "copyTo": {
     "lib": [
-      "src/**/*.json"
+      "./src/**/*.json"
     ]
   }
 }

apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx

@@ -8,7 +8,7 @@ const diagramStyles: any = require('./GetStartedPage.diagram.module.scss');
 import * as stylesImport from './GetStartedPage.module.scss';
 const styles: any = stylesImport;
 const pageStyles: any = require('../PageStyles.module.scss');
-const corePackageData = require('../../../node_modules/office-ui-fabric-core/package.json');
+const corePackageData = require('office-ui-fabric-core/package.json');
 const corePackageVersion: string = corePackageData && corePackageData.version || '9.2.0';
 
 export class GetStartedPage extends React.Component<any, any> {

apps/fabric-website/src/pages/HomePage/HomePage.tsx

@@ -3,8 +3,8 @@ import { css } from 'office-ui-fabric-react/lib/Utilities';
 import * as stylesImport from './HomePage.module.scss';
 const styles: any = stylesImport;
 
-const corePackageData = require('../../../node_modules/office-ui-fabric-core/package.json');
-const reactPackageData = require('../../../node_modules/office-ui-fabric-react/package.json');
+const corePackageData = require('office-ui-fabric-core/package.json');
+const reactPackageData = require('office-ui-fabric-react/package.json');
 
 export class HomePage extends React.Component<any, any> {
   public render(): JSX.Element {

apps/fabric-website/src/pages/Styles/IconsPage/IconsPage.tsx

@@ -7,7 +7,7 @@ import * as stylesImport from './IconsPage.module.scss';
 const styles: any = stylesImport;
 const pageStyles: any = require('../../PageStyles.module.scss');
 
-const iconData = require('../../../../node_modules/office-ui-fabric-core/src/data/icons.json');
+const iconData = require('office-ui-fabric-core/src/data/icons.json');
 
 export class IconsPage extends React.Component<any, any> {
   public render(): JSX.Element {

common/changes/@uifabric/fabric-website/fixbuild_2018-05-26-05-50.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Use require.resolve logic in builds & watch .js files from node_modules",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/fixbuild_2018-05-26-05-50.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Use require.resolve logic in builds & watch .js files from node_modules",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/config/pre-copy.json

@@ -1,17 +1,17 @@
 {
   "copyTo": {
     "dist": [
-      "index.html"
+      "./index.html"
     ],
     "dist/sass": [
-      "node_modules/office-ui-fabric-core/dist/sass/**/*",
-      "src/common/_highContrast.scss",
-      "src/common/_i18n.scss",
-      "src/common/_semanticSlots.scss",
-      "src/common/_themeOverrides.scss"
+      "office-ui-fabric-core/dist/sass/**/*",
+      "./src/common/_highContrast.scss",
+      "./src/common/_i18n.scss",
+      "./src/common/_semanticSlots.scss",
+      "./src/common/_themeOverrides.scss"
     ],
     "dist/css": [
-      "node_modules/office-ui-fabric-core/dist/css/**/*"
+      "office-ui-fabric-core/dist/css/**/*"
     ]
   }
 }

scripts/require-resolve-cwd.js

@@ -0,0 +1,3 @@
+module.exports = function (request) {
+  return require.resolve(request, { paths: [process.cwd()] });
+}

scripts/tasks/copy.js

@@ -1,10 +1,41 @@
+const path = require('path');
+
+function expandSourcePath(pattern) {
+  const requireResolveCwd = require('../require-resolve-cwd');
+
+  if (!pattern) {
+    return null;
+  }
+
+  // just returns the relative paths
+  if (pattern.startsWith('.')) {
+    return pattern;
+  }
+
+  // tries to resolve the packages, handling scoped packages
+  const splitPattern = pattern.split('/');
+  const packageName = pattern[0] == '@' ? `${splitPattern[0]}/${splitPattern[1]}` : splitPattern[0];
+
+  try {
+    const resolvedPackageJson = requireResolveCwd(`${packageName}/package.json`);
+
+    if (!resolvedPackageJson) {
+      // returns pattern if the packageName didn't contain a package.json (not really a package)
+      return pattern;
+    }
+
+    return pattern.replace(packageName, path.dirname(resolvedPackageJson));
+  } catch (e) {
+    console.error(e);
+  }
+}
 
 module.exports = function (options) {
   const { logStartTask, logEndTask } = require('../logging');
   const path = require('path');
   const fs = require('fs');
 
-  configPath = path.resolve(process.cwd(), 'config/pre-copy.json');
+  let configPath = path.resolve(process.cwd(), 'config/pre-copy.json');
 
   if (!fs.existsSync(configPath)) {
     return;
@@ -18,7 +49,7 @@ module.exports = function (options) {
       const sources = config.copyTo[destination];
 
       for (let source of sources) {
-        source = path.resolve(process.cwd(), source);
+        source = expandSourcePath(source);
         destination = path.resolve(process.cwd(), destination);
         startCopy(source, destination);
       }

scripts/tasks/jest-resources.js

@@ -12,13 +12,13 @@ const styleMockPath =
     createConfig: (customConfig) => merge(
       {
         moduleNameMapper: {
-          'ts-jest': path.resolve(__dirname, '../node_modules/ts-jest'),
+          'ts-jest': require.resolve('ts-jest'),
           '\\.(scss)$': path.resolve(__dirname, 'jest-style-mock.js'),
           'KeyCodes': path.resolve(__dirname, 'jest-mock.js')
         },
 
         'transform': {
-          '.(ts|tsx)': path.resolve(__dirname, '../node_modules/ts-jest/preprocessor.js')
+          '.(ts|tsx)': require.resolve('ts-jest/preprocessor.js')
         },
 
         'reporters': [

scripts/tasks/jest.js

@@ -7,7 +7,7 @@ module.exports = function (options) {
   const jestConfigPath = findConfig('jest.config.js');
 
   if (fs.existsSync(jestConfigPath)) {
-    const jestPath = path.resolve(__dirname, '../node_modules/jest/bin/jest');
+    const jestPath = require.resolve('jest/bin/jest');
     const customArgs = options && options.argv ? options.argv.slice(3).join(' ') : '';
 
     const args = [

scripts/tasks/sass.js

@@ -1,6 +1,7 @@
 module.exports = function (options) {
   const glob = require('glob');
   const path = require('path');
+  const requireResolveCwd = require('../require-resolve-cwd');
 
   const _fileNameToClassMap = {};
 
@@ -86,11 +87,22 @@ module.exports = function (options) {
     return source.join('\n');
   }
 
+  function requireResolvePackageUrl(packageUrl) {
+    const fullName = packageUrl + (packageUrl.endsWith('.scss') ? '' : '.scss');
+
+    try {
+      return requireResolveCwd(fullName);
+    } catch (e) {
+      // try again with a private reference
+      return requireResolveCwd(path.join(path.dirname(fullName), `_${path.basename(fullName)}`));
+    }
+  }
+
   function patchSassUrl(url, prev, done) {
     let newUrl = url;
 
     if (url[0] === '~') {
-      newUrl = path.resolve(process.cwd(), 'node_modules', url.substr(1));
+      newUrl = requireResolvePackageUrl(url.substr(1));
     }
     else if (url === 'stdin') {
       newUrl = '';

scripts/tasks/ts.js

@@ -1,7 +1,7 @@
 module.exports = function (options) {
   const path = require('path');
   const execSync = require('../exec-sync');
-  const typescriptPath = 'node ' + path.resolve(__dirname, '../node_modules/typescript/lib/tsc');
+  const typescriptPath = 'node ' + require.resolve('typescript/lib/tsc');
   const libPath = path.resolve(process.cwd(), 'lib');
   const srcPath = path.resolve(process.cwd(), 'src');
   const extraParams = '--pretty' + (options.isProduction ? ` --inlineSources --sourceRoot ${path.relative(libPath, srcPath)}` : '');

scripts/tasks/tslint.js

@@ -6,7 +6,7 @@ module.exports = function (options) {
   const rulesPath = path.dirname(msCustomRulesMain);
   const projectPath = path.resolve(process.cwd(), 'tsconfig.json');
   const sourcePath = path.resolve(process.cwd(), 'src/**/*.ts*');
-  const tslintPath = 'node ' + path.resolve(__dirname, '../node_modules/tslint/lib/tslint-cli');
+  const tslintPath = 'node ' + require.resolve('tslint/lib/tslint-cli');
 
   execSync(`${tslintPath} --project ${projectPath} -t stylish -r ${rulesPath}`);
 };

scripts/tasks/webpack-resources.js

@@ -148,10 +148,6 @@ module.exports = {
 
         plugins: [
           new WebpackNotifierPlugin(),
-          new webpack.WatchIgnorePlugin([
-            /\.js$/,
-            /\.d\.ts$/
-          ]),
           new ForkTsCheckerWebpackPlugin()
         ]
       },