nicejade / vue-boilerplate-template Goto Github PK

故事：

1. 很多项目在运行时候默认了本地运行端口（如 8080 ），虽然也支持外部传递端口，如 PORT=8888 yarn start；但，如果这些端口在本地被占用了，会存在报错，导致不能顺利得运行；在更改端口继续运行，这十分浪费时间；有必要进行优化；如果指定的端口被占用，就寻址新的可能端口，这可以极大提升开发体验（ vue-cli3 就内置了这些功能 👏🏻）。

2. 当我们运行项目时候，会设定在浏览器自动打开对应开发地址（新 Tab 栏）；然而，当再次运行时候，如果浏览器已经存在先前打开的地址，就不应该再打开一个；（ vue-cli3 也内置了这些功能 👏🏻，这是参考了 create-react-app | openBrowser 的实现 ）。

为提升本地开发体验，需要对这两点进行优化。

lodash 的 4.* 提供了模块化功能；即：可以像如下使用 ：

const array = require('lodash/array')

如此就只是引入该方法相关代码，有利于节省构建包的 Size，也无需借用额外的插件来辅助(借用插件效果更佳)。但，利用 Webpack 的 SplitChunksPlugin 功能，将 lodash 单独拆分，会将模块化功能失效；即便运用 lodash-webpack-plugin + babel-plugin-lodash 组合来实现按需模块化引入 lodash；两害相权取其轻，则选择按需引入 lodash，而不将其拆分。

何况，随着 ES6 ES7 的越发流行，许多方法都可以选择使用原生方法，而不用借助于 Lodash。

你好，你的项目里面这3个插件都使用了，CommonsChunkPlugin不是重复了Dll的事情了吗？

入口的src/main.js中为什么要引入 ‘babel-polyfill’呢，是不是多余了。因为babelrc里面已经存在‘transform-runtime’插件了。

I just find a plugin for index.html to add dynamic path 'vender.dll.js', comes across this issue: https://github.com/SimenB/add-files-html-webpack-plugin ,no more need ejs at all。

webpack4 is so nice, so ? It's a cool choice to upgrade it

改成 eval-source-map 可以定位到debugger，但是debugger的时候，es6的代码都有问题

(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to to denote scoped slots.
改个东西就好了：报scope 错误，可能是版本升级到2.5有调整
原先
<el-table-column label="操作" width="100"> <template **scope**="scope"> <el-button @click="onEditClick(scope.row, scope.$index)" type="primary" size="small">编辑</el-button> </template> </el-table-column>
改成
<el-table-column label="操作" width="100"> <template **slot-scope**="scope"> <el-button @click="onEditClick(scope.row, scope.$index)" type="primary" size="small">编辑</el-button> </template> </el-table-column>

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

PWA, 即：Progressive Web App (渐进式Web应用程序)；它的存在，使得在网络上提供惊人用户体验的新方式，它为构建高质量的渐进式 Web 应用程序，提供了令人难以置信的优势，可以轻松取悦用户，增加参与度并增加转化次数。所以这已经成为了现代化 Web 应用程序必做工作。

check楼主的代码，讲elementUi替换成vux，移除elementui的引用和打包配置，加入vux之后打包会报以下

error  in ./node_modules/vux/src/components/divider/index.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <p class="vux-divider">
|     <slot></slot>

 @ ./node_modules/happypack/loader.js?id=happy-babel-vue!./node_modules/vux-loader/src/script-loader.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/test/getIcon.vue 2:0-59 11:13-20
 @ ./src/test/getIcon.vue
 @ ./src/router/routeConfig.js
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

 error  in ./node_modules/vux/src/components/popup/index.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <transition
|     :name="`vux-popup-animate-${position}`">

相对你的配置差异部分如下

//webpack.base.conf.js

const vuxLoader = require('vux-loader')

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    'vux-ui',
    'progress-bar',
    {
      name: 'duplicate-style',
      options: {
        cssProcessorOptions : {
          safe: true,
          zindex: false,
          autoprefixer: {
            add: true,
            browsers: [
              'iOS >= 7',
              'Android >= 4.1'
            ]
          }
        }
      }
    }
  ]

//package.json
"vux-loader": "^1.2.9",

执行

npm start

报错，错误栈如下：

ERROR  Failed to compile with 24 errors                                                                                                            4:32:58 PM

 error  in ./src/assets/scss/style.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:913:18)
    at Object.getInstalledBinaries (/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/lib/extensions.js:121:13)
    at foundBinariesList (/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/test/workspace/js/nicelinks-vue-client/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/test/workspace/js/nicelinks-vue-client/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:571:32)

 @ ./src/assets/scss/style.scss 4:14-129 13:3-17:5 14:22-137
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

....

0 info it worked if it ends with ok
1 verbose cli [ 'D:\nodeJs\node.exe',
1 verbose cli 'D:\nodeJs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'analyz' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preanalyz', 'analyz', 'postanalyz' ]
5 info lifecycle [email protected]preanalyz: [email protected]
6 silly lifecycle [email protected]preanalyz: no script for preanalyz, continuing
7 info lifecycle [email protected]analyz: [email protected]
8 verbose lifecycle [email protected]analyz: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]analyz: PATH: D:\nvm\v7.6.0\node_modules\npm\bin\node-gyp-bin;E:\00LEarnTest\vue-boilerplate-template-master\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0;D:\eclipse\JDK1.6\bin;D:\eclipse\JDK1.6\jre\bin;C:\Program Files\Git\cmd;C:\Program Files\TortoiseSVN\bin;D:\nvm;D:\nodeJs;C:\Users\haoguoqi\AppData\Roaming\npm;D:\nodeJs;D:\Microsoft VS Code\bin;C:\Users\haoguoqi\AppData\Local\Programs\Fiddler;C:\Users\haoguoqi\AppData\Local\GitHubDesktop\bin;D:\nvm;D:\nodeJs
10 verbose lifecycle [email protected]analyz: CWD: E:\00LEarnTest\vue-boilerplate-template-master
11 silly lifecycle [email protected]analyz: Args: [ '/d /s /c',
11 silly lifecycle 'NODE_ENV=production npm_config_report=true npm run build' ]
12 silly lifecycle [email protected]analyz: Returned: code: 1 signal: null
13 info lifecycle [email protected]~analyz: Failed to exec analyz script
14 verbose stack Error: [email protected] analyz: NODE_ENV=production npm_config_report=true npm run build
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (D:\nvm\v7.6.0\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:192:7)
14 verbose stack at ChildProcess. (D:\nvm\v7.6.0\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:192:7)
14 verbose stack at maybeClose (internal/child_process.js:890:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd E:\00LEarnTest\vue-boilerplate-template-master
17 error Windows_NT 6.1.7601
18 error argv "D:\nodeJs\node.exe" "D:\nodeJs\node_modules\npm\bin\npm-cli.js" "run" "analyz"
19 error node v7.6.0
20 error npm v4.1.2
21 error code ELIFECYCLE
22 error [email protected] analyz: NODE_ENV=production npm_config_report=true npm run build
22 error Exit status 1
23 error Failed at the [email protected] analyz script 'NODE_ENV=production npm_config_report=true npm run build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the vue-boilerplate-template package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error NODE_ENV=production npm_config_report=true npm run build
23 error You can get information on how to open an issue for this project with:
23 error npm bugs vue-boilerplate-template
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls vue-boilerplate-template
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-preset-minify
npm WARN deprecated [email protected]: This package is unmaintained. Use @sinonjs/formatio instead
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

Do I need to care? When I run npm install

npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of sinon@>=2.1.0 <5 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^2 || ^2.2.0-rc.0 || ^2.1.0-beta || ^1.12.6 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

It seems like I install failed.

The version of node

# yarn -v
1.7.0
# npm -v
6.0.1
# node -v
v8.11.2
# uname -a
Linux debian 4.12.9-041209-generic #201708242344 SMP Fri Aug 25 03:47:24 UTC 2017 x86_64 GNU/Linux

What's the problem?Think you!