feat(webpack-runner): 将webpack-runner切换到ts,并且支持了defineConsts, devServ…

…er，plugins配置
NervJS · Jun 28, 2018 · f1c0271 · f1c0271
1 parent b86fa3e
commit f1c0271
Show file tree

Hide file tree

Showing 15 changed files with 416 additions and 246 deletions.
diff --git a/packages/taro-webpack-runner/index.js b/packages/taro-webpack-runner/index.js
@@ -1,8 +1,2 @@
-const { buildProd, buildDev } = require('./src')
-
-module.exports = function (config, customWebpackConfig = {}) {
-  if (config.isWatch) {
-    return buildDev(config, customWebpackConfig)
-  }
-  buildProd(config, customWebpackConfig)
-}
+module.exports = require('./dist/index.js').default
+module.exports.default = module.exports
diff --git a/packages/taro-webpack-runner/package.json b/packages/taro-webpack-runner/package.json
@@ -4,7 +4,12 @@
   "description": "webpack runner for taro",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "run-s clean lint:typecheck prod",
+    "dev": "tsc -w",
+    "prod": "tsc",
+    "clean": "rimraf dist",
+    "lint": "tslint src/**/*.ts --fix",
+    "lint:typecheck": "tslint -p tsconfig.json src/**/*.ts --fix"
   },
   "repository": {
     "type": "git",
@@ -20,6 +25,8 @@
   },
   "homepage": "https://github.com/NervJS/taro#readme",
   "dependencies": {
+    "@types/webpack": "^4.4.3",
+    "@types/webpack-dev-server": "^2.9.4",
     "autoprefixer": "^8.2.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
@@ -50,5 +57,12 @@
     "webpack": "^3.11.0",
     "webpack-dev-server": "^2.11.2",
     "webpack-merge": "^4.1.2"
+  },
+  "devDependencies": {
+    "@types/autoprefixer": "^6.7.3",
+    "@types/node": "^10.3.5",
+    "npm-run-all": "^4.1.3",
+    "rimraf": "^2.6.2",
+    "typescript": "^2.9.2"
   }
 }
diff --git a/packages/taro-webpack-runner/src/config/base.conf.js b/packages/taro-webpack-runner/src/config/base.conf.js
diff --git a/packages/taro-webpack-runner/src/config/base.conf.ts b/packages/taro-webpack-runner/src/config/base.conf.ts
@@ -0,0 +1,123 @@
+import * as path from 'path'
+import * as Util from '../util'
+import webpack from 'webpack'
+import { BuildConfig } from '../util/types'
+
+const tweakTsConfig = (tsConfig) => {
+  const tsConfigKeys = [
+    'silent',
+    'logLevel',
+    'logInfoToStdOut',
+    'instance',
+    'compiler',
+    'context',
+    'configFile',
+    'transpileOnly',
+    'ignoreDiagnostics',
+    'errorFormatter',
+    'colors',
+    'compilerOptions',
+    'appendTsSuffixTo',
+    'appendTsxSuffixTo',
+    'entryFileCannotBeJs',
+    'onlyCompileBundledFiles',
+    'happyPackMode',
+    'getCustomTransformers',
+    'reportFiles',
+    'experimentalWatchApi'
+  ]
+  for (const tsConfigKey of Object.keys(tsConfig)) {
+    if (!tsConfigKeys.includes(tsConfigKey)) {
+      delete tsConfig[tsConfigKey]
+    }
+  }
+  tsConfig.onlyCompileBundledFiles = true
+}
+
+export default (config: BuildConfig): webpack.Configuration => {
+  const { staticDirectory = 'static', plugins = {} } = config
+  const imgName = `${staticDirectory}/images/[name].[ext]`
+  const mediaName = `${staticDirectory}/media/[name].[ext]`
+  const fontName = `${staticDirectory}/fonts/[name].[ext]`
+  const extName = `${staticDirectory}/ext/[name].[ext]`
+  const imgLimit = (config.module && config.module.base64 && config.module.base64.imageLimit) || 2000
+  const fontLimit = (config.module && config.module.base64 && config.module.base64.fontLimit) || 2000
+  const babelConfig = plugins.babel || {}
+  const tsConfig = plugins.typescript || {}
+  babelConfig.plugins = (Array.isArray(babelConfig.plugins) ? babelConfig.plugins : []).concat([
+    require.resolve('babel-plugin-syntax-dynamic-import'),
+    [require.resolve('babel-plugin-transform-react-jsx'), {
+      pragma: 'Nerv.createElement'
+    }]
+  ])
+  tweakTsConfig(tsConfig)
+
+  const babelLoader = {
+    loader: require.resolve('babel-loader'),
+    options: babelConfig
+  }
+  const tsLoader = {
+    loader: require.resolve('ts-loader'),
+    options: tsConfig
+  }
+
+  return {
+    module: {
+      rules: [
+        {
+          oneOf: [
+            {
+              test: /\.jsx?$/,
+              exclude: /node_modules/,
+              use: [ babelLoader ]
+            },
+            {
+              test: /\.tsx?$/,
+              exclude: /node_modules/,
+              use: [ babelLoader, tsLoader ]
+            },
+            {
+              test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+              loader: require.resolve('file-loader'),
+              options: {
+                name: mediaName
+              }
+            },
+            {
+              test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+              loader: require.resolve('file-loader'),
+              options: {
+                limit: fontLimit,
+                name: fontName
+              }
+            },
+            {
+              test: /\.(png|jpe?g|gif|bpm|svg)(\?.*)?$/,
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imgLimit,
+                name: imgName
+              }
+            },
+            {
+              exclude: /\.(jsx?|tsx?|css|scss|sass|less|styl|html|json|ejs)$/,
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: 2000,
+                name: extName
+              }
+            }
+          ]
+        }
+      ]
+    },
+    resolve: {
+      mainFields: ['main', 'module'],
+      symlinks: false,
+      modules: [path.join(Util.getRootPath(), 'node_modules'), 'node_modules']
+    },
+    resolveLoader: {
+      modules: [path.join(Util.getRootPath(), 'node_modules'), 'node_modules']
+    }
+  }
+}
diff --git a/...o-webpack-runner/src/config/build.conf.js → ...o-webpack-runner/src/config/build.conf.ts b/...o-webpack-runner/src/config/build.conf.js → ...o-webpack-runner/src/config/build.conf.ts
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   sourceRoot: 'src',
   outputRoot: 'dist',
   publicPath: '/',

diff --git a/...aro-webpack-runner/src/config/dev.conf.js → ...aro-webpack-runner/src/config/dev.conf.ts b/...aro-webpack-runner/src/config/dev.conf.js → ...aro-webpack-runner/src/config/dev.conf.ts
@@ -1,8 +1,8 @@
-const webpack = require('webpack')
+import webpack from 'webpack'
+import { getPostcssPlugins } from './postcss.conf'
+import { BuildConfig } from '../util/types'
 
-const { getPostcssPlugins } = require('./postcss.conf')
-
-module.exports = function (config) {
+export default function (config: BuildConfig): webpack.Configuration {
   const styleLoader = require.resolve('style-loader')
   const cssLoader = {
     loader: require.resolve('css-loader'),

diff --git a/...bpack-runner/src/config/devServer.conf.js → ...bpack-runner/src/config/devServer.conf.ts b/...bpack-runner/src/config/devServer.conf.js → ...bpack-runner/src/config/devServer.conf.ts
@@ -1,4 +1,6 @@
-module.exports = function ({publicPath, contentBase, protocol, host, publicUrl}) {
+import webpackDevServer from 'webpack-dev-server'
+
+export default ({publicPath, contentBase, protocol, host, publicUrl}): webpackDevServer.Configuration => {
   return {
     disableHostCheck: process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
     compress: true,

diff --git a/...webpack-runner/src/config/postcss.conf.js → ...webpack-runner/src/config/postcss.conf.ts b/...webpack-runner/src/config/postcss.conf.js → ...webpack-runner/src/config/postcss.conf.ts
@@ -1,7 +1,7 @@
-const autoprefixer = require('autoprefixer')
-const pxtransform = require('postcss-pxtransform')
-const constparse = require('postcss-plugin-constparse')
-const { isEmptyObject } = require('../util')
+import autoprefixer from 'autoprefixer'
+import pxtransform from 'postcss-pxtransform'
+import constparse from 'postcss-plugin-constparse'
+import { isEmptyObject } from '../util'
 
 const defaultAutoprefixerConf = {
   browsers: [
@@ -11,9 +11,9 @@ const defaultAutoprefixerConf = {
   flexbox: 'no-2009'
 }
 
-const plugins = []
+const plugins = [] as any[]
 
-exports.getPostcssPlugins = function (config) {
+export const getPostcssPlugins = function (config) {
   const designWidth = config.designWidth || 750
   const useModuleConf = config.module || {}
   const customPostcssConf = useModuleConf.postcss || {}

diff --git a/...ro-webpack-runner/src/config/prod.conf.js → ...ro-webpack-runner/src/config/prod.conf.ts b/...ro-webpack-runner/src/config/prod.conf.js → ...ro-webpack-runner/src/config/prod.conf.ts
@@ -1,7 +1,9 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+import webpack from 'webpack'
+import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import UglifyJsPlugin from 'uglifyjs-webpack-plugin'
 
-const { getPostcssPlugins } = require('./postcss.conf')
+import { getPostcssPlugins } from './postcss.conf'
+import { BuildConfig } from '../util/types'
 
 const defaultCSSCompressConf = {
   mergeRules: false,
@@ -21,12 +23,12 @@ const defaultJSCompressConf = {
   warnings: false
 }
 
-module.exports = function (config) {
+export default (config: BuildConfig): webpack.Configuration => {
   const useModuleConf = config.module || {
     compress: {}
   }
   const sourceMap = config.sourceMap
-  const cssExtractPlugins = []
+  const cssExtractPlugins = [] as any[]
   const devtool = 'hidden-source-map'
   const compress = Object.assign({}, {
     css: defaultCSSCompressConf,